<template>
    <div class="content">
      <div class="filter-bar">
        <el-select v-model="selectedCounty" placeholder="全部">
          <el-option
            v-for="county in counties"
            :key="county.value"
            :label="county.label"
            :value="county.value"
          ></el-option>
        </el-select>
  
        <el-select v-model="selectedType" placeholder="全部类型">
          <el-option
            v-for="type in types"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          ></el-option>
        </el-select>
  

        <el-select v-model="select1" placeholder="短期预警回执" >
          <el-option label="是" value="yes"></el-option>
          <el-option label="否" value="no"></el-option>
        </el-select>

          <el-select v-model="select2" placeholder="短时强降水回执" >
          <el-option label="是" value="yes"></el-option>
          <el-option label="否" value="no"></el-option>
        </el-select>

        <el-select v-model="searchField" placeholder="全部">
          <el-option
            v-for="field in searchFields"
            :key="field.value"
            :label="field.label"
            :value="field.value"
          ></el-option>
        </el-select>
  
        <el-input v-model="searchQuery" placeholder="请输入关键字" style="max-width: 150px;"></el-input>
  
        <el-button type="primary" @click="handleSearch">查找</el-button>
        <el-button @click="showAll">显示全部</el-button>
        <el-button>新增用户</el-button>
  
        <span class="info-text">用户数量: {{ total }} 个</span>
  
  
      </div>
  
      <el-table
        :data="groupData"
        style="width: 100%"
        stripe
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        :row-style="rowStyle"
      >
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :fixed="column.fixed"
          :min-width="column.minWidth"
        >
          <template v-if="column.slot" v-slot="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange"
        style="margin-top: 20px;"
      ></el-pagination>
    </div>
  </template>
  
  <script>
  import Request from '@/api/user/request';
  export default {
    data() {
      return {
        groupData: [],
        list: [],
        currentPage: 1,
        pageSize: 9,
        total: 0,
        selectedCounty: '', 
        selectedType: '', 
        selectedJob: '', 
        searchField: '隐患点名称', 
        searchQuery: '',
        change: '地灾预警回执管理', 
        counties: [
          { label: '市本级', value: '' },
        ],
        jobs: [],
        columns: [
          { prop: "dsid", label: "手机", fixed: "left", minWidth: "30%" },
          { prop: "clazz", label: "姓名", fixed: "left", minWidth: "18%" },
          { prop: "dsname", label: "职位", minWidth: "35%" },
          { prop: "lon", label: "区县", minWidth: "25%" },
          { prop: "lat", label: "乡镇", minWidth: "25%" },
          { prop: "altitude", label: "村", minWidth: "25%" },
          { prop: "county", label: "街道", minWidth: "20%" },
          { prop: "town", label: "单位", minWidth: "25%" },
          { prop: "village", label: "灾害类型", minWidth: "25%" },
          { prop: "street", label: "行业", minWidth: "20%" },
          { prop: "time", label: "短期预警回执", minWidth: "30%" },
          { prop: "time", label: "短期长降水回执", minWidth: "35%" },
          { prop: "time", label: "接收产品范围", minWidth: "30%" },
          { prop: "time", label: "编辑时间", minWidth: "25%" },
          { prop: "time", label: "老人机", minWidth: "25%" },
          { prop: "work", label: "操作", minWidth: "35%", slot: true }
        ],
        types: [],
        types2: [],
        searchFields: [
          { label: '姓名', value: 'dsname' },
          { label: '手机号码', value: 'dsid' },
          { label: '乡镇', value: 'town' },
        ],
  
      };
    },
    watch: {
      selectedCounty(newVal) {
      this.fetchData(); 
    }
    },
    methods: {
  
    //   async fetchData() {
    //     try {
    //       const response = await Request.get('/newDisasterPoint/list', {
    //         params: {
    //           pageNum: 1,
    //           pageSize: 9999,
    //           county: this.selectedCounty || '',
    //         }
    //       });
  
    //       if (response.status === 200) {
    //         this.list = response.data.data.list;
    //         this.total = this.list.length;
    //         console.log(response.data.data.list);
  
  
    //         this.groupData = this.list.map(item => ({
    //           dsid: item.dsid,
    //           clazz: item.clazz,
    //           dsname: item.dsname,
    //           lon: item.lon,
    //           lat: item.lat,
    //           altitude: item.altitude,
    //           county: item.county,
    //           town: item.town,
    //           village: item.village,
    //           street: item.street,
    //           time: item.editTime
    //         }));
    //         this.updateDisplayedData();
    //       } else {
    //         console.log('请求出错');
    //       }
    //     } catch (error) {
    //       console.error('请求失败', error);
    //     }
    //   },
      updateDisplayedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = this.currentPage * this.pageSize;
        this.groupData = this.list.slice(start, end); 
      },
      handlePageChange(page) {
        this.currentPage = page;
        this.updateDisplayedData();
      },
      handleSearch() {
        console.log('搜索内容:', this.searchField, this.searchQuery);
        this.fetchData();
      },
      showAll() {
        this.searchQuery = '';
        this.selectedCounty = '';
        this.selectedType = '';
        this.fetchData(); 
      },
      handleEdit(row) {
        console.log('编辑行:', row);
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('删除行:', row);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      headerCellStyle() {
        return {
          background: "#0c2340",
          color: "#fff"
        };
      },
      cellStyle() {
        return {
          background: "#05152e",
          color: "#fff"
        };
      },
      rowStyle() {
        return {
          height: "30px"
        };
      }
    },
    mounted() {
      this.fetchData();
    },
  
  };
  </script>
  
  <style scoped>
  .content {
    justify-content: center;

  }
  
  .filter-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .filter-bar .el-select,
  .filter-bar .el-input,
  .filter-bar .el-button {
    margin-right: 10px;
  }
  
  .info-text {
    margin-left: 20px;
    margin-right: 20px;
    color: #FFD700; 
  }
  </style>
  